<template>
    <div class="app-container">
        <div :class="['filter-container']">

            <!-- 筛选框需要些双份 一种是没有展开状态下的  只有主要的几个筛选框，另一种是全部的筛选框都展示 也就是展开状态下的 -->
            <!-- 没有展开状态下的筛选框 -->
            <el-form ref="filtrateForm" :inline="true" :model="filtrateForm" label-width="120px">
                <el-form-item label="用户名/用户操作:">
                    <el-input v-model.trim="filtrateForm.key" placeholder="用户名/用户操作" style="width:160px;" clearable />
                </el-form-item>
                <el-form-item>
                    <el-button @click="getList()">查询</el-button>
                </el-form-item>

            </el-form>

        </div>

        <div :class="['table']">
            <div class="table-container">
                <el-table :key="tableKey" v-loading="listLoading" row-key="menuId" height="100%" :data="list" border fit
                    highlight-current-row style="width: 100%;">

                    <el-table-column prop="username" header-align="center" align="center" label="用户名称" />
                    <el-table-column prop="operation" header-align="center" align="center" label="用户操作" />
                    <el-table-column prop="method" header-align="center" align="center" width="150" :show-overflow-tooltip="true"
                        label="请求方法" />
                    <el-table-column prop="params" header-align="center" align="center" width="150" :show-overflow-tooltip="true"
                        label="请求参数" />
                    <el-table-column prop="time" header-align="center" align="center" label="执行时长(毫秒)" />
                    <el-table-column prop="ip" header-align="center" align="center" width="150" label="IP地址" />

                    <el-table-column prop="createDate" header-align="center" align="center" width="180" label="创建时间">
                        <template slot-scope="scope">{{ scope.row.createDate | toData }}</template>
                    </el-table-column>

                </el-table>
            </div>
        </div>

        <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />

        <!-- <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @getList="getList" /> -->

    </div>
</template>

<script>
import permission from '@/directive/permission/index.js' // 权限判断指令
import checkPermission from '@/utils/permission' // 权限判断函数
import { getLogList } from '@/api/permission'// 请求数据
import { toDate } from '@/utils'
import Pagination from '@/components/Pagination' // secondary package based on el-pagination 分页组件

export default {
    name: 'LayoutTable',
    components: { Pagination },
    directives: { permission }, // 指令
    // 过滤
    filters: {
        toData (data) {
            return toDate(data)
        }
    },
    data () {
        return {
            // 筛选框的 form 表单
            filtrateForm: {
                key: ''
            },
            // 表单验证
            rules: {
            },
            tableKey: 0,
            listLoading: true, // 表格加载数据时的 loading
            list: [], // 表格数据
            total: 0, // 总条数
            listQuery: { // 表格当前页 和 当前页的展示数量
                page: 1,
                limit: 20
            }
        }
    },
    created () {
        this.getList()
    },
    methods: {
        // 获取表格数据
        async getList () {
            this.listLoading = true
            // 筛选+分页
            const params = Object.assign({
                'key': this.filtrateForm.key
            }, this.listQuery)
            // 请求
            const res = await getLogList(params).catch(e => { })
            // 失败
            if (!res) { this.listLoading = false; return }
            // 成功
            const { data, code, message } = res
            this.list = data.list
            this.total = data.totalCount
            this.listLoading = false
        }
        // 重新获取表格数据 页码归为1
        // handleFilter () {
        //     this.listQuery.page = 1
        //     this.getList()
        // },

    }
}
</script>
<style lang="scss" scoped>
//表格布局的注释：
//$rowLength 这个变量表示了 筛选的搜索框会有多少行，由于在不同宽度显示器下 所占行数会不一定 ，所以下面使用媒体查询 做兼容
//最小兼容至 1366
@import '~@/styles/layout-table.scss';
$rowLength: 2;
@media all and (min-width: 1659px) {
    $rowLength: 2;
    @include calculation($rowLength: $rowLength);
}
@media all and (max-width: 1659px) {
    $rowLength: 3;
    @include calculation($rowLength: $rowLength);
}
</style>
